import React, { Component } from "react";
import { connect } from "react-redux";
import MainLayout from "../../../component/mainLayout/mainLayout";
import Button from "../../../component/button/index";
import bankCardImg from "../../../images/icon/open-card.png";
import openAccountFailImg from "../../../images/icon/open-account-fail.png";
import "./index.scss";
import yhTools from "../../../tools/yh";
import BackModal from "../../../component/backModal/index";
import { InterfaceG } from "../../../config/Config";
import { Toast } from "antd-mobile";
const statusTitleMap = {
	success: "成功",
	fail: "失败"
};

const productMap = {
	601: "小辉付",
	802: "小辉贷",
	1: "小辉宝"
};

const backHomeMap = {
	601: "/xhfHomeNoCredit",
	802: "/xhdHome",
	1: "/walletHome"
};

const callPhoneData = {
	telphone: 4008219666
};

@connect(state => ({
	lnid: state.getAppPlatformsDatas.lnid,
	getAppPlatformsDatas: state.getAppPlatformsDatas
}))
class OpenAccountResult extends Component {
	constructor(props) {
		super(props);
		this.state = {
			status: "success",
			cardNo: "",
			isVisible: false,
			processNo: ""
		};
	}
	componentDidMount() {
		const status = yhTools.getUrlParam("status");
		const cardNo = yhTools.getUrlParam("cardNo");
		const errorMes = yhTools.getUrlParam("errorMes");
		if (this.props.lnid == "601" && status == "success") {
			this.getProcessNo();
		}
		this.setState({
			status,
			cardNo: this.formatCard(cardNo),
			errorMes: decodeURIComponent(errorMes)
		});
	}
	jumpPage = () => {
		if (this.props.lnid == 1) {
			this.props.history.push("/rechargeAccount");
		} else {
			this.props.history.push("/editPersonalInfo");
		}
	};
	restart = () => {
		this.props.history.push(backHomeMap[this.props.lnid]);
	};
	clickBtn = () => {
		const { status } = this.state;
		status === "success" && this.jumpPage();
		status === "fail" && this.restart();
		status === "success" && this.state.processNo == "1" && this.gotoSx();
	};
	formatCard = value => {
		return value.replace(/\s/g, "").replace(/(\d{4})(?=\d)/g, "$1 ");
	};
	showModal = () => {
		// 如果成功，展示弹窗，失败，则直接返回对应首页
		const { lnid } = this.props;
		const { status } = this.state;
		// 小辉宝不需要返回
		if (status === "fail" || lnid == 1) {
			this.props.history.push(backHomeMap[lnid]);
		} else {
			this.setState({
				isVisible: true
			});
		}
	};
	onModalClick = booleanValue => {
		this.setState({
			isVisible: false
		});
		!booleanValue && this.props.history.push(backHomeMap[this.props.lnid]);
	};
	//获取getProcessNo接口
	getProcessNo() {
		const _this = this;
		let objs = {
			url: InterfaceG.appBtnOpotion,
			params: {
				longitude: this.props.getAppPlatformsDatas.longitude,
				latitude: this.props.getAppPlatformsDatas.latitude,
				userDeviceInfo: JSON.stringify(
					this.props.getAppPlatformsDatas.devicesInfo
				)
			},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				_this.setState({
					processNo: res.data.processNo
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	gotoSx() {
		this.props.history.push({
			pathname: "/xhfOpenSuccess",
			state: { fromUrl: "xhfIndexOther" }
		});
	}
	callPhone = () => {
		yhTools.callPhone(callPhoneData).then(
			() => {},
			() => {}
		);
	};
	render() {
		const { status, cardNo, isVisible, processNo = "", errorMes } = this.state;
		const { lnid } = this.props;
		const isSuccess = status === "success";
		const isBao = lnid == 1;
		const _pageParams = {
			header: {
				title: `开户${statusTitleMap[status]}`
			},
			isModal: true,
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<div>
				<MainLayout pageParams={_pageParams} handleBack={this.showModal}>
					<BackModal
						product={lnid}
						isVisible={isVisible}
						onClick={this.onModalClick}
					/>
					<div className="open-account-result-container">
						<div className="bg-white">
							{isSuccess ? (
								<div>
									<p className="remind">恭喜您成功开通电子账户</p>
									<div
										className="card"
										style={{
											height: 0,
											paddingBottom: "60.5%",
											background: `url(${bankCardImg})`,
											backgroundSize: "cover"
										}}
									>
										<span className="card-no">{cardNo}</span>
									</div>
								</div>
							) : (
								<div>
									<img
										src={openAccountFailImg}
										alt=""
										className="icon-fail"
										style={{ marginTop: "16px" }}
									/>
									<p className="remind">电子账户开通失败</p>
									<p className="tip">
										失败原因:{errorMes},请尝试重新开通，如有疑问请联系客服
									</p>
									<p className="phone" onClick={this.callPhone}>
										<a>400-8219-666</a>
									</p>
								</div>
							)}
						</div>
						<Button className="button" onClick={this.clickBtn}>
							{isSuccess
								? isBao
									? `立即赚钱`
									: processNo == "1"
									? "下一步"
									: `完善${productMap[lnid]}申请资料`
								: "重新开通"}
						</Button>
					</div>
				</MainLayout>
			</div>
		);
	}
}

export default OpenAccountResult;
